<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.grid {
			  margin: 50px;
			  padding: 20px;
			  background-color: #e3fafc;
			  border: 1px solid #99e9f2;
			  display: grid;
			  grid-gap: 40px;
			  grid-template-columns: repeat(3, 1fr);
			  grid-auto-rows: minmax(50px, auto);
			}
			
			.grid > div {
			  border: 1px solid #3bc9db;
			  border-radius: 3px;
			  background-color: #99e9f2;
			  font-size:250%;
			  color: #fff;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			}
			
			.grid > div:nth-child(1) {
			  grid-row: 1 / 4;
			  grid-column: 1;
			}
			
			.grid > div:nth-child(2) {
			  grid-row: 1 / 3;
			  grid-column: 2;
			}
			
			.grid > div:nth-child(3) {
			  grid-row: 1 / 4;
			  grid-column: 3;
			}
			
			.grid > div:nth-child(4) {
			  grid-row: 4 / 7;
			  grid-column: 1;
			}
			
			.grid > div:nth-child(5) {
			  grid-row: 3 / 7;
			  grid-column: 2;
			}
			
			.grid > div:nth-child(6) {
			   grid-row: 4 / 6;
			  grid-column: 3;
			}
		</style>
	</head>
	<body>
		<div class="grid">
		  <div>1</div>
		  <div>2</div>
		  <div>3</div>
		  <div>4</div>
		  <div>5</div>
		  <div>6</div>
		  <div>7</div>
		</div>
	</body>
</html>
